<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相册管理器</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/layui.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content" id="app">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="file-manager">
                    	<div th:utext="${csrf.uniqueHiddenField}"></div>
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="test1" style="width: 100%;">
                            <i class="fa fa-chain"></i>选择照片
                        </button> 
                        <div class="hr-line-dashed"></div>
                        <ul class="folder-list" style="padding: 0">
	                         <label> 图片展示：<span style="color:red">请上传(690*370)的图片</span> </label>
	                         <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
								 <div class="layui-upload-list" id="demo2"></div>
							 </blockquote>
						</ul>
						 <ul class="folder-list" style="padding: 0">
						 	<label> 图片描述： </label>
                             <input id="msg" name="msg"  class="form-control" type="text" maxlength="100">
                         </ul>
                        <div class="hr-line-dashed"></div>
                        <button type="button" class="layui-btn" id="saveAction" style="width: 100%;">
                            <i class="fa fa-cloud"></i>上传照片
                        </button>
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-9 animated fadeInRight">
            <div class="row">
                <div class="col-sm-12">
                    <div class="file-box" v-for="row in rows">
                        <div class="file">
                            <a href="#">
                                <span class="corner"></span>
                                <div class="image">
                                    <img alt="image" class="img-responsive" :src="row.url">
                                </div>
                                <div class="file-name"> 
                                    <small>{{row.photoMsg}}</small>
                                    <br/>
                                    <small>{{row.createTime}}</small>
                                </div>
                               &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<button
                                    class="btn btn-warning btn-xs copy" @click="cover(row.photoId)">设置封面
                            </button>
                             &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<button class="btn btn-danger btn-xs"
                                                                        @click="remove(row.photoId)">删除
                            </button>
                            </a>
                        </div>
                    </div>
                    <div id="incomeNum"></div>
                </div>
            </div>
            <div>
                <ul id="page"></ul>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/bootstrap-paginator.min.js"></script>

<script src="/js/content.js?v=1.0.0"></script>
<script src="/js/plugins/layui/layui.js"></script>
<script src="/js/plugins/clipboard/clipboard.min.js"></script>
<script src="/js/plugins/layer/layer.min.js"></script>
<script src="/js/vue.min.js"></script>

<script type="text/javascript" th:inline="javascript">
	
    var app = new Vue({
        el: '#app',
        data: {
            total: 0,
            file: '',
            type: '',
            rows: '',
            pageInfo : {},
            pageNumber:1,
            pageSize: 12,
        },
        methods: {
            getData: function () {
                $.getJSON("/album/photo/list", {
                    type: this.type,
                    pageNumber : this.pageNumber,
                    pageSize : this.pageSize,
                    albumId : [[${albumId}]]
                }, function (r) {
                	 app.total = r.data.total;
                     app.rows = r.data.records;
                     app.pageInfo = r.data;
                     app.page();
                });
            },
            page: function () {
                var options = {
                    currentPage: app.pageInfo.current, //当前页
                    totalPages: app.pageInfo.pages, //总页数
                    numberofPages: 4, //显示的页数
                    bootstrapMajorVersion: 3,
                    alignment: 'center',
                    size: 'large',
                    shouldShowPage: true,
                    itemTexts: function (type, page, current) { //修改显示文字
                        switch (type) {
                            case "first":
                                return "首页";
                            case "prev":
                                return "上一页";
                            case "next":
                                return "下一页";
                            case "last":
                                return "尾页";
                            case "page":
                                return page;
                        }
                    },
                    onPageClicked: function (event, originalEvent, type, page) {
                        app.pageNumber = page;
                        app.getData();
                    }
                };
                $('#page').bootstrapPaginator(options);
            },
            remove: function (id) {
                layer.confirm('确定要删除选中的记录？', {
                    btn: ['确定', '取消']
                }, function () {
                    $.ajax({
                        url: "/album/photo/remove",
                        type: "post",
                        data: {
                            'id': id,
                            'albumId':[[${albumId}]]
                        },
                        success: function (r) {
                            if (r.code == 0) {
                                layer.msg(r.msg);
                                app.getData();
                            } else {
                                layer.msg(r.msg);
                            }
                        }
                    });
                })
            },
            cover: function (id) {
                layer.confirm('确定要将该图片设置为封面吗？', {
                    btn: ['确定', '取消']
                }, function () {
                    $.ajax({
                        url: "/album/photo/setCover",
                        type: "post",
                        data: {
                            'photoId': id,
                            'albumId':[[${albumId}]]
                        },
                        success: function (r) {
                            if (r.code == 0){ 
                                layer.msg(r.msg);
                            } else {
                                layer.msg(r.msg);
                            }
                        }
                    });
                })
            }
        },
        created: function () {
            this.getData();
        }
    });
</script>
<script type="text/javascript" th:inline="javascript">
    
    var files = null;
    layui.use('upload', function () {
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1', //绑定元素
            auto:false,
        	//bindAction: '#saveAction', //指向一个按钮触发上传
            url: '/album/photo/save', //上传接口
            data: {'albumId':[[${albumId}]],'msg':''},
            acceptMime: 'image/*',
            size: 1000,
            multiple:true,
            accept: 'images',
            choose: function(obj){ 
                //将每次选择的文件追加到文件队列
                files = obj.pushFile();
                console.log(files)
                //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                obj.preview(function(index, file, result){
//                   console.log(index); //得到文件索引
//                   console.log(file); //得到文件对象
//                   console.log(result); //得到文件base64编码，比如图片
                   
                  $('#demo2').append('<img  src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" width="50px" height="50px">')
               });
            }
        });
    });
     
			
    //图片提交
    var csrf_token = $('#csrf_token').val();
    $("#saveAction").click(function(){
    	layer.load(1); 
    	var form = new FormData();
    	console.log("==========")
    	console.log(files)
    	if(!files){
    		layer.msg("请选择图片");
    		layer.closeAll('loading'); 
    		return false;
    	}
    	for(i in files){
    		form.append("file"+i,files[i]);
    	}
    	form.append('albumId',[[${albumId}]]);
    	var msg = $("#msg").val();
    	if(msg != '' && msg != null){
    		form.append('msg',$("#msg").val());
    	} 
    	$.ajax({
    		beforeSend: function (xhr) {  
 		       xhr.setRequestHeader("_csrf_token", csrf_token);  
 		    }, 
    		url:'/album/photo/save',
    		type:"POST",
    		contentType:false,
    		processData :false,
    		async:false,
    		data:form,
    		success:function(r,textStatus,request){
    			layer.closeAll('loading');
    			if (r.code == 0) { 
  				  	layer.msg(r.msg);
                  	location.reload();
  			  	}else{
  				 	csrf_token = request.getResponseHeader('csrf');
  				  	layer.msg(r.msg);
  			  	} 
    		},
    		error:function(r){
    			layer.closeAll('loading');
    			if(r.status == 400){
  					layer.msg("请勿重复提交"); 
	  			}else{
	  				layer.msg("网络异常");  
	  			} 
    		}
    	});
    });
    
</script>
</body>
</html>
